<script setup>

import {BaseImgUrl} from "../utils/lshttp";
// #ifdef H5
import wx from 'weixin-js-sdk'
import * as uniWebView from "@dcloudio/uni-webview-js";
import {ref} from "vue";
import LszbgCountDown from "../components/LszbgCountDown.vue";
import {receiveAwardAPI, waiveChallengeAPI} from "../services/lstz";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {showTip} from "../utils/conUtils";
// #endif

const prop = defineProps({
  isLast: Boolean,
  isTasKList: {
    type: Boolean,
    default: false
  },
  item: Object,
  city: Object
})

const back = () => {
  uni.navigateBack()
}
const toMakeMoney = (iaTab, path) => {
  // #ifdef H5
  let siToPAge = false
  uniWebView.webView.getEnv(function (res) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境1" + JSON.stringify(res), icon: "none"})
    if (res.plus) {
      if (iaTab) {
        uniWebView.webView.switchTab({
          url: path
        })
      } else {
        uniWebView.webView.navigateTo({
          url: path
        });
      }
      siToPAge = true
    }
  });
  wx.miniProgram.getEnv(function (env) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境2" + JSON.stringify(res), icon: "none"})
    if (env['miniprogram'] == true) {
      if (iaTab) {
        wx.miniProgram.switchTab({
          url: path
        })
      } else {
        wx.miniProgram.navigateTo({
          url: path
        });
      }
      siToPAge = true
    }
  });
  if (siToPAge === false) {
    if (iaTab) {
      uni.switchTab({
        url: path
      })
    } else {
      uni.navigateTo({
        url: path
      });
    }
  }
  // #endif
}
const toHome = () => {
  // #ifdef H5
  let siToPAge = false
  uniWebView.webView.getEnv(function (res) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境1" + JSON.stringify(res), icon: "none"})
    if (res.plus) {
      uniWebView.webView.switchTab({
        url: "/pages/index/index"
      });
      siToPAge = true
    }
  });
  wx.miniProgram.getEnv(function (res) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境2" + JSON.stringify(res), icon: "none"})
    wx.miniProgram.switchTab({
      url: "/pages/index/index"
    });
    uni.switchTab({
      url: "/pages/index/index"
    });
    siToPAge = true
  });
  if (siToPAge === false) {
    // uniWebView.webView.switchTab({
    //   url: "/pages/index/index"
    // });
    uni.switchTab({url: "/pages/index/index"})
  }
  // #endif
}

// 创建响应式数据
const show = ref(false);
const userInfoStore = useUserInfoStore()
const emits = defineEmits(['giveUpTask', 'getGift'])
const giveUpTask = async () => {
  const res = await waiveChallengeAPI(prop.item.id, userInfoStore.userId)
  await uni.showToast({title: res.msg, icon: "none", duration: 3000})
  close();
  emits('giveUpTask')
}

const getGift = async () => {
  uni.showModal({
    title: '提示',
    content: '是否确认领奖，领奖后红包金额将在当前余额基础上累加，可到零钱明细中查看?',
    success: async function (res) {
      if (res.confirm) {
        const res = await receiveAwardAPI(userInfoStore.userId, prop.item.id)
        await uni.showToast({title: res.msg, icon: "none", duration: 3000})
        emits('getGift')
      }
    }
  });
}

// 定义方法
function open() {
  // 打开逻辑，比如设置 show 为 true
  show.value = true;
  // console.log('open');
}

function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
  // console.log('close');
}
</script>
<template>
  <!-- 根据 isTasKList 属性选择不同的样式类 -->
  <view :class="prop.isTasKList?'item_content1':'item_content'">
    <!-- 报名截止时间和参与人数 -->
    <view style="display: flex;align-items: center">
      <!-- 报名截止时间 -->
      <text class="bm_end_time">报名截止时间：{{ item.end_time }}</text>
      <view style="flex: 1"></view>
      <!-- 火焰图标 -->
      <image class="fire" :src="BaseImgUrl + '/once/lstz/fire.png'"></image>
      <!-- 参与人数 -->
      <text class="join_count">{{ item.join_count }}人已参与</text>
    </view>
    <!-- 奖励金额展示 -->
    <view class="money_bg_content">
      <view style="position: relative">
        <!-- 奖励金额背景图片 -->
        <image class="money_bg"
               :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
        <!-- 奖励金额文本 -->
        <view class="money_text">
          <text>{{ item.money }}</text>
          <text style="font-size: 32rpx">元</text>
        </view>
      </view>
      <!-- 间距 -->
      <view style="width: 20rpx"></view>
      <!-- 任务标题和描述 -->
      <view style="margin-top: 10rpx">
        <!-- 任务标题 -->
        <view style="font-size: 30rpx;color: #3D3D3D;font-weight: bold">{{ item.title }}</view>
        <!-- 任务描述 -->
        <view style="font-size: 24rpx;color: #888888;margin-top: 20rpx">
          {{ item.descript }}
        </view>
      </view>
    </view>
    <!-- 分隔线 -->
    <view style="width: 100%;height: 1px;background-color: #EFEFEF;margin:20rpx 0"></view>
    <!-- 任务状态和操作按钮 -->
    <view style="display: flex">
      <!-- 任务状态和进度 -->
      <view style="display:flex;flex-direction: column;align-items: flex-start;flex: 1">
        <!-- 不同状态下的提示信息 -->
        <view v-if="item.status === 1 && item.time <= 0" class="cancel_tip">正在等待订单审核</view>
        <view
            v-else-if="item.status === 2 && (item.is_cancel === 0 || item.is_cancel === null || item.is_cancel === 'null' )"
            class="cancel_tip">规定时间内未完成挑战
        </view>
        <view v-else-if="item.status === 2 && item.is_cancel === 1" class="cancel_tip">任务规定时间内主动取消挑战</view>
        <view v-else-if="item.status === 3" class="cancel_tip">挑战任务完成-待领奖</view>
        <view v-else-if="item.status === 4" class="cancel_tip">挑战任务完成-已领奖</view>
        <!-- 倒计时组件，显示剩余时间 -->
        <lszbg-count-down v-else before-text="剩余时间" :is-hms="false" :is-color="true"
                          :time="item.time * 1000"></lszbg-count-down>
        <!-- 进度条 -->
        <view class="bl_box">
          <view class="" style="width: 128rpx;margin-right: 16rpx;border-radius: 20rpx;overflow: hidden">
            <progress :percent="(item.nums/(item.type === 1 ? item.order_num : item.invite_num)*100)"
                      border-radius="100"
                      duration="16"
                      stroke-width="8"
                      activeColor="#FF8548"
                      backgroundColor="#FFDECE"
                      active="true"/>
          </view>
          <!-- 进度文本 -->
          <text class="val_num" style="color: #3D3D3D">进度&nbsp</text>
          <text class="val_num">{{ item.nums }}</text>
          <text class="val_num" style="color: #3D3D3D">/{{ item.type === 1 ? item.order_num : item.invite_num }}</text>
        </view>
      </view>
      <!-- 操作按钮 -->
      <view v-if="item.status === 1" class="fq_tz" @click="open">放弃挑战</view>
      <view style="margin-left: 20rpx"></view>
      <!-- 根据任务类型和城市显示不同的按钮 -->
      <view v-if="item.status === 1 && item.type === 1"
            :class="item.reseller_id === city.reseller_id ? 'go_buy':'go_buy1'"
            @click="item.reseller_id === city.reseller_id?toHome():showTip('当前城市不能继续该任务')">
        {{ item.reseller_id === city.reseller_id ? '去下单' : '仅限' + item.city_name }}
      </view>
      <view v-if="item.status === 1 && item.type === 2"
            :class="item.reseller_id === city.reseller_id ? 'go_buy':'go_buy1'"
            @click="item.reseller_id === city.reseller_id?toMakeMoney(false,'/pages/makemoney/getmaker'):showTip('当前城市不能继续该任务')">
        {{ item.reseller_id === city.reseller_id ? '去邀请' : '仅限' + item.city_name }}
      </view>
      <!-- 根据任务状态显示不同的按钮 -->
      <view v-if="item.status === 2" class="go_buy" @click="back">重新报名</view>
      <view v-if="item.status === 3" class="go_buy" @click="getGift">领奖励</view>
      <view v-if="item.status === 4" class="go_buy" @click="back">挑战其他任务</view>
    </view>
  </view>
  <!-- 间距，如果不是最后一个任务则显示 -->
  <view style="height: 28rpx" v-if="!prop.isLast"></view>

  <!-- 放弃挑战弹窗 -->
  <up-popup :show="show" mode="center" :round="10" @close="close" @open="open" closeable
            :safe-area-inset-bottom="false">
    <view class="box-content">
      <!-- 弹窗标题 -->
      <view class="title">温馨提示</view>
      <!-- 分隔线 -->
      <view style="height: 1px;width:100%;background-color: #f4f0f0"></view>
      <!-- 弹窗内容 -->
      <view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center">
        <!-- 警告图标和提示文本 -->
        <view class="warning">
          <image :src="BaseImgUrl + '/once/lstz/warning.png'"></image>
          <text style="margin-top: 30rpx">&nbsp;&nbsp;确定放弃挑战吗？</text>
        </view>
        <!-- 提示内容 -->
        <view class="content">
          <text>放弃挑战后，此次挑战中已达成的挑战
            <text style="color: #FC754A">记录将 全部归0</text>
            ，请谨慎处理。
          </text>
        </view>
      </view>
      <!-- 分隔线 -->
      <view style="height: 1px;background-color: #f4f0f0;margin: 0 30rpx"></view>
      <!-- 操作按钮 -->
      <view style="display: flex;margin: 30rpx">
        <view style="flex: 1"></view>
        <!-- 确认放弃按钮 -->
        <view class="fq_tz" @click="giveUpTask">确认放弃</view>
        <view style="margin-left: 20rpx"></view>
        <!-- 取消按钮 -->
        <view class="go_buy" @click="show = false">我在想想</view>
      </view>
    </view>
  </up-popup>
</template>


<style scoped lang="scss">
.item_content {
  z-index: 100;
  margin: 0 50rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;
}

.item_content1 {
  z-index: 100;
  margin: 0 20rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;
}

.bm_end_time {
  font-size: 26rpx;
  color: #3D3D3D;
}

.join_count {
  font-size: 24rpx;
  color: #888888;
}

.fire {
  width: 31rpx;
  height: 27rpx;
}

.money_bg_content {
  margin-top: 20rpx;
  position: relative;
  height: 176rpx;
  display: flex;

  .money_bg {
    width: 140rpx;
    height: 176rpx;
    position: absolute;
    z-index: 1;
  }

  .money_text {
    color: #ff5c14;
    font-weight: bold;
    font-size: 49rpx;
    z-index: 100;
    position: relative;
    width: 140rpx;
    text-align: center;
    line-height: 120rpx;
  }
}

.fq_tz {
  height: 58rpx;
  padding: 0 18rpx;
  background: #FFFFFF;
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  border: 2rpx solid #E5E5E5;
  text-align: center;
  line-height: 58rpx;
  color: #888888;
  font-size: 24rpx
}

.go_buy {
  height: 58rpx;
  padding: 0 18rpx;
  background: linear-gradient(270deg, #FC754A 0%, #FDBA37 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #FFFFFF;
  font-size: 24rpx
}

.go_buy1 {
  height: 58rpx;
  padding: 0 18rpx;
  background: linear-gradient(270deg, #dee9ea 0%, #d9d9e6 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #3D3D3D;
  font-size: 24rpx
}

.bl_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6rpx;

  .val_num {
    font-size: 24rpx;
    color: #FF8548;
    margin-top: -2px;
  }

  .time_text {
    color: #FC7532;
    font-size: 22rpx;
  }
}


.box-content {
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 600rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  letter-spacing: 3rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 32rpx;
    text-align: center;
    padding: 28rpx 0;
  }

  .warning {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;

    image {
      width: 76rpx;
      height: 76rpx;
    }

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #FF5621;
      line-height: 36rpx;
    }
  }

  .content {
    margin: 30rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 56rpx;
  }
}

.cancel_tip {
  font-size: 24rpx;
  color: #888888;
}
</style>